import 'package:flutter/material.dart';
import 'package:super_tooltip/super_tooltip.dart';

class BookCasePage extends StatefulWidget {
  const BookCasePage({Key? key}) : super(key: key);

  @override
  State<BookCasePage> createState() => _BookCasePageState();
}

class _BookCasePageState extends State<BookCasePage> {

  @override
  void initState() {
    print('BookCasePage initState');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('BookCasePage build');
    return Scaffold(
      appBar: AppBar(title: Text('书架', style: TextStyle(color: Colors.black45))),
      body: Center(child: TargetWidget()),
    );
  }
}

class TargetWidget extends StatefulWidget {
  const TargetWidget({Key? key}) : super(key: key);

  @override
  State createState() => _TargetWidgetState();
}

class _TargetWidgetState extends State<TargetWidget> {
  final _controller = SuperTooltipController();
  Future<bool> _willPopCallback() async {
    // If the tooltip is open we don't pop the page on a backbutton press
    // but close the ToolTip
    if (_controller.isVisible) {
      await _controller.hideTooltip();
      return false;
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _willPopCallback,
      child: GestureDetector(
        onTap: () async {
          await _controller.showTooltip();
        },
        child: SuperTooltip(
          showBarrier: true,
          shadowColor: Colors.transparent,
          controller: _controller,
          popupDirection: TooltipDirection.up,
          backgroundColor: Color(0xff2f2d2f),
          // left: 30,
          // right: 30,
          // top: 8,
          arrowTipDistance: 16.0,
          arrowBaseWidth: 20.0,
          arrowLength: 10.0,
          borderWidth: 0.0,
          constraints: const BoxConstraints(
            minHeight: 0.0,
            maxHeight: 100,
            minWidth: 0.0,
            maxWidth: 100,
          ),
          showCloseButton: ShowCloseButton.none,
          touchThroughAreaShape: ClipAreaShape.rectangle,
          touchThroughAreaCornerRadius: 30,
          barrierColor: Colors.transparent,
          content: const Text(
            "show me more money",
            softWrap: true,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          child: Container(
            width: 40.0,
            height: 40.0,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }

  void makeTooltip() {
    _controller.showTooltip();
  }
}
